<template>
  <div class="stay-info-container">
    <div class="stay-info-box scroll-box">
      <div class="info-top-box">
        <div class="info-content-box info-border">
          <div class="info-content-left">设备名称</div>
          <div class="info-content-reight">{{ detailData.deviceName }}</div>
        </div>
        <div class="info-content-box">
          <div class="info-content-left">设备编号</div>
          <div class="info-content-reight">{{ detailData.deviceNumber }}</div>
        </div>
      </div>

      <div class="info-conter-box">
        <div class="info-content-box info-border">
          <div class="info-content-left">设备类型</div>
          <div class="info-content-reight">{{ topType[detailData.topid - 1] }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">设备型号</div>
          <div class="info-content-reight">{{ detailData.modelName }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">计划名称</div>
          <div class="info-content-reight">{{ detailData.planName }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">变量名</div>
          <div class="info-content-reight">{{ detailData.vname }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">模式</div>
          <div class="info-content-reight">{{ modeType[detailData.mode - 1] }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">当前值</div>
          <div class="info-content-reight">{{ detailData.currentValue }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">保养说明</div>
          <div class="info-content-reight">{{ detailData.maintenanceExplain }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">通知时间</div>
          <div class="info-content-reight">{{ new Date(detailData.time).Format('yyyy/MM/dd hh:mm:ss') }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">合同编号</div>
          <div class="info-content-reight">{{ detailData.protocol }}</div>
        </div>
      </div>

      <div class="info-bottom-box">
        <div class="info-content-box info-border">
          <div class="info-content-left">产线编号</div>
          <div class="info-content-reight">{{ detailData.productNumber }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">产线识别号</div>
          <div class="info-content-reight">{{ detailData.identificationNumber }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">所属客户</div>
          <div class="info-content-reight">{{ detailData.company }}</div>
        </div>
      </div>

      <div
        class="info-bottom-button-box"
        v-if="$checkBtnPermission('maintenanceCenter:maintenanceNotice:list:detail:transform')"
        v-has="'maintenanceCenter:maintenanceNotice:list:detail:transform'"
      >
        <button class="bottom-button" type="info" @click="onTransForWorkOrder()">转工单</button>
      </div>
    </div>

    <!-- 延时 -->
  </div>
</template>

<script>
import { Tab, Tabs, Button, Dialog, Field } from 'vant';
import { getPlanDetail, confirmAlarmNotice, neglectAlarmNotice, delayAlarmNotice } from '@/api/maintenanceNotice';
export default {
  name: 'StayWorkDetail',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    // [Dialog.name]: Dialog,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field
  },
  data() {
    return {
      active: 1,
      dialogCancel: false,
      dialogCancelValue: '',
      tag: 1,
      id: '',
      detailData: {},
      topType: ['搬运类', '输送类', '包装类', '其他类'],
      modeType: ['触发', '周期']
    };
  },
  created() {
    console.log(this.$route.query);
    this.id = this.$route.query.id || '';

    this.getDetail();
  },
  methods: {
    //接单
    onComeOrder() {
      Dialog.confirm({
        title: '接单成功',
        confirmButtonText: '处理工单',
        confirmButtonColor: '#3378FF',
        cancelButtonText: '关闭',
        message: '工单（202104130001）已接单成功，请及时进行处理.'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    //忽略弹窗
    onOpenEditWorkOrderManage() {
      Dialog.confirm({
        title: '忽略通知',
        message: '故障通知忽略后，系统不再后续通知是否恢复，确定要忽略？',
        confirmButtonColor: 'var(--color-primary)'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    //删除工单
    onDeleteWorkOrder() {
      Dialog.confirm({
        title: '提示',
        confirmButtonText: '确认',
        confirmButtonColor: 'var(--color-primary)',
        cancelButtonText: '取消',
        message: '工单删除后，工单相关记录都将删除，确定删除此工单？'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },

    onTransForWorkOrder() {
      this.$router.push({
        name: 'noticeTransforWorkOrder',
        query: {
          id: this.id
        }
      });
    },
    //获取详情
    getDetail() {
      getPlanDetail({ id: this.id }).then(res => {
        console.log(res);

        this.detailData = res.data;
      });
    },
    //延迟
    onDelayed() {
      this.dialogCancel = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.stay-info-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.stay-info-box {
  width: 100%;
  height: 100%;
  margin-bottom: 1.92rem;
}
.info-top-box {
  width: 100%;
  height: 2.426667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  // margin-top: 0.213333rem;
}
.info-conter-box {
  width: 100%;
  // height: 9.786667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  // margin-top: 0.213333rem;
}
.info-bottom-box {
  width: 100%;
  // height: 2.426667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  // margin-top: 0.213333rem;
  margin-bottom: 1rem;
}

.info-content-box {
  width: 100%;
  min-height: 1.226667rem;
  display: flex;
  padding-top: 0.453333rem;
}
.info-content-left {
  width: 1.92rem;
  color: #999999;
  font-size: 0.373333rem;
  min-width: 1.92rem;
  white-space: nowrap;
}
.info-content-reight {
  color: #333333;
  font-size: 0.373333rem;
  margin-left: 0.426667rem;
  width: 7.733333rem;
}
.info-border {
  border-bottom: 1px solid #f2f6fc;
}
.float-tel {
  float: right;
}

//操作按钮
.info-bottom-button-box {
  width: 100%;
  height: 1.92rem;
  background-color: #fff;
  padding: 0.4rem 0.426667rem;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  .bottom-button {
    width: 100%;
    border-radius: 0.106667rem;
    padding: 0 0.4rem;
    font-size: 0.37333rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.02667rem solid #1989fa;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 1.17333rem;
    margin: 0;
    padding: 0;
    font-size: 0.42667rem;
    line-height: 1.2;
    text-align: center;
    border-radius: 0.05333rem;
    cursor: pointer;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    -webkit-appearance: none;
    ::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: #000;
      border: inherit;
      border-color: #000;
      border-radius: inherit;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 0;
      content: ' ';
    }
  }
}

//按钮
.button-margin {
  margin: 0.426667rem;
  position: fixed;
  width: 91%;
  bottom: 0.053333rem;
}
::v-deep .van-button {
  border-radius: 0.106667rem;
}

//取消工单
.dialogCancel-box {
  padding: 0.426667rem;
  color: rgb(51, 51, 51);
}
.dialogCancel-text {
  font-size: 0.32rem;
  color: #666666;
  padding-left: 0.426667rem;
  margin-top: 0.266667rem;
}
::v-deep .van-field__value {
  border-bottom: 1px solid #ebeef5;
}
</style>
